<template>
  <a-table
    rowKey="id"
    size="middle"
    bordered
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="ipaginationSub"
    :scroll="{y: 300}"
    class="j-table-force-wrap"
    @change="handleTableChange1"
  >

<!--
    :expandedRowKeys="expandedRowKeys"
    @expand="handleExpand"
    :rowSelection="{selectedRowKeys, onChange: onSelectChange}"-->
<!--    @change="handleTableChange"-->

    <!-- 内嵌table区域 begin -->
<!--    <template slot="expandedRowRender" slot-scope="record">-->

<!--      <statement-account-details-order-sub-table :record="record"/>-->
<!--    </template>-->

    <template slot="htmlSlot" slot-scope="text">
      <div v-html="text"></div>
    </template>

    <template slot="imgSlot" slot-scope="text">
      <div style="font-size: 12px;font-style: italic;">
        <span v-if="!text">无图片</span>
        <img v-else :src="getImgView(text)" alt="" style="max-width:80px;height:25px;"/>
      </div>
    </template>

    <template slot="fileSlot" slot-scope="text">
      <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
      <a-button
              v-else
              ghost
              type="primary"
              icon="download"
              size="small"
              @click="uploadFile(text)"
      >
        <span>下载</span>
      </a-button>
    </template>

    <span slot="action" slot-scope="text, record">
      <a v-if="record.izCompareSuccess == 0" @click="handleEdit(record)">校正</a>
      <template v-else> -- </template>
    </span>

  </a-table>
</template>

<script>
  import { getAction } from '@api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import StatementAccountDetailsOrderSubTable from './StatementAccountDetailsOrderSubTable'

  export default {
    name: 'StatementAccountDetailsSubTable',
    mixins: [JeecgListMixin],
    components: {
      StatementAccountDetailsOrderSubTable,
    },
    props: {
      record: {
        type: Object,
        default: null,
      }
    },
    data() {
      return {
        description: '对账单详情内嵌列表',
        disableMixinCreated: true,
        // 展开的行
        expandedRowKeys: [],
        loading: false,
        dataSource: [],
        /* 分页参数 */
        ipaginationSub: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '40', '50'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        columns: [
          {
            title: '序号',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: (text, record, index) =>
              `${(this.ipaginationSub.current - 1) * this.ipaginationSub.pageSize + index + 1}`
          },
          // {
          //   title: '商户号',
          //   align: 'center',
          //   dataIndex: 'partnerNo',
          // },
          {
            title: '商户订单号',
            align: 'center',
            dataIndex: 'outTradeNo',
          },
          {
            title: '交易描述',
            align: 'center',
            dataIndex: 'tradeMessage',
          },
          {
            title: '支付时间',
            align: 'center',
            dataIndex: 'tradeFinishTime',
          },
          {
            title: '交易状态',
            align: 'center',
            dataIndex: 'tradeState_dictText'
          },
          {
            title: '订单总金额',
            align: 'center',
            dataIndex: 'totalFee',
            customRender: function (text) {
              if (!text) {
                text = 0
              }
              return text.toLocaleString('zh-Hans-CN', { style: 'currency', currency: 'CNY' })
            },
          },
          {
            title: '应收款IDS',
            align: 'center',
            dataIndex: 'orderIds',
          },
          {
            title: '订单类型',
            align: 'center',
            dataIndex: 'orderType_dictText',
          },
          {
            title: '支付方式',
            align: 'center',
            dataIndex: 'tradeType',
          },
          {
            title: '订单号',
            align: 'center',
            dataIndex: 'transactionId',
          },
          {
            title: '付款人',
            align: 'center',
            dataIndex: 'customerId_dictText',
          },
          {
            title:'是否对比成功',
            align:"center",
            dataIndex: 'izCompareSuccess_dictText',
            hidden:true,
            customRender: function (t, r, index) {
              if (r.izCompareSuccess == 0) {
                return t + '（' + r.compareMessage + '）'
              }
              return t
            }
          },
          // {
          //   title: '更新日期',
          //   align: 'center',
          //   dataIndex: 'updateTime',
          // },
          // {
          //   title: '操作',
          //   dataIndex: 'action',
          //   align: 'center',
          //   width: 120,
          //   scopedSlots: { customRender: 'action' },
          // },
        ],
        url: {
          listByMainId: '/zcgl/statementAccount/queryStatementAccountDetailsPage',
        },
      }
    },
    watch: {
      record: {
        immediate: true,
        handler() {
          if (this.record != null) {
            this.loadData(this.record)
          }
        }
      }
    },
    methods: {

      handleTableChange1 (pagination, filters, sorter) {
        this.ipaginationSub = pagination
        this.loadData(this.record)
      },
      loadData(record) {
        this.loading = true
        this.dataSource = []
        getAction(this.url.listByMainId, {
          statementAccountId: record.id,
          pageNo: this.ipaginationSub.current,
          pageSize: this.ipaginationSub.pageSize
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipaginationSub.total = res.result.total
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleExpand(expanded, record) {
        this.expandedRowKeys = []
        if (expanded === true) {
          this.expandedRowKeys.push(record.id)
        }
      },
    },
  }
</script>

<style scoped>

@import '~@assets/less/common.less';
</style>
